<template>
  <div class="dv-eharts">
    <div class="dv-echarts-init" ref="echartDom"></div>
    <div style="display: none">
      其他内容
    </div>
  </div>
</template>

<script>
import {nextTick, ref} from 'vue'

export default {
  name: "echarts",
  props: {
    config: {
      type: Object
    },
    editor: {
      type: Object
    },
    id: {
      type: String
    }
  },
  setup(props) {
    const echartDom = ref(null)
    let echartCom = null
    const init = () => {
      echartCom = echarts.init(echartDom.value);

      // // 指定图表的配置项和数据
      // var option =  ;

      // 使用刚指定的配置项和数据显示图表。
      setOption()
    }
    const setOption = () => {
      echartCom.setOption(props.config.option, true);
    }
    nextTick(() => {
      init()
    })
    // 拖拽发生改变
    const resetComp = (type) => {
      if (type === 'size') {
        echartCom.resize()
      }
    }
    PubSub.subscribe('update-echarts', () => {
      resetComp("size")
    })
    // 更新组件
    PubSub.subscribe("update-comp", () => {
      echartCom.setOption(props.config.option, true);
      // setOption()
    })
    return {
      echartDom,
      resetComp
    }
  }
}
</script>

<style scoped>
.dv-eharts {
  width: 100%;
  height: 100%;
  position: relative;
}

.dv-echarts-init {
  width: 100%;
  height: 100%;
}
</style>